import { reactive ,onMounted, onBeforeUnmount,ref,toRef,computed,watch,watchEffect,nextTick} from "vue";
import echart from "echarts";
import {useStore} from "vuex";
import {
  getData,search
} from "@/api/article";
import {
  Rotations
} from "@/hooks/index";
import {
  message
} from "ant-design-vue";

interface Data {
  topData: {};//首页头部数据
}
interface echartState{
  option:any,//echart 配置
  value2:any,//时间
  style:object,//样式
  charts:{init:Function},//ref 图表
  params:{name:string,type:string,time:number}//请求数据
 
}
const topHosk = (): any => {
  const state: Data = reactive({
       topData:[],
  });
  // 获取头部信息
  getData("/data/detail").then((res)=>{
    state.topData=res.data
  })
  return {
    state, 
  };
};
// 折线统计图图表格
const echarts = (): any => {
  const echartState:echartState= reactive({
      option,
      value2:null,
      style: {
          height: "600px",
          width: "100%"
        },
      charts:{
          init: Object
        },
  
      params:{
        name:"recharge_num",type:"month",time:0
      }
  })

  nextTick(() => {
    setEchart()
  });
  //选择时间
  const onChange=(data:any,dataString:string)=>{
       echartState.params.time=Math.round(Number(data._d)/1000)
       setEchart()
  }
  // 获取图表数据 并该变
  function setEchart(){
    search(echartState.params).then((res:any)=>{
      echartState.option.title.text=nameMap.get(`${echartState.params.name}`)
      echartState.option.xAxis[0].data=res.xdata
      echartState.option.series[0].data=res.ydata
      echartState.charts.init();
     })
  }
  // 选择分类
  const handleChange = (e: any) => {
    setEchart()
  };
  return {
    echartState,
    onChange ,
    handleChange
  };
};
export { topHosk,echarts };
// 配置echart图表格信息
const option= {
  backgroundColor: "rgba(0,102,102)",
  title: {
    text: "哎呦,不错哦",
    textStyle: {
      align: "center",
      color: "#fff",
      fontSize: 16,
    },

    left: "center",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 255, 233,0)",
            },
            {
              offset: 0.5,
              color: "rgba(255, 255, 255,1)",
            },
            {
              offset: 1,
              color: "rgba(0, 255, 233,0)",
            },
          ],
          global: false,
        },
      },
    },
  },
  grid: {
    top: "5%",
    left: "5%",
    right: "5%",
    bottom: "15%",
    // containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        show: true,
      },
      splitArea: {
        // show: true,
        color: "#f00",
        lineStyle: {
          color: "#f00",
        },
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: false,
      },
      boundaryGap: false,
      data: ["A", "B", "C", "D", "E", "F"],
    },
  ],

  yAxis: [
    {
      type: "value",
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        margin: 20,
        textStyle: {
          color: "#d1e6eb",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "注册总量",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: "circle",
      symbolSize: 15,
      lineStyle: {
        normal: {
          color: "#00ca95",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00ca95",
        },
      },

      itemStyle: {
        color: "#00ca95",
        borderColor: "#fff",
        borderWidth: 1,
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },
      tooltip: {
        show: false,
      },
      areaStyle: {
        normal: {
          color: new echart.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)",
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20,
        },
      },
      data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
    },
  ],
}
const nameMap=new Map([
  ["recharge_num","充值人数"],
  ["recharge_money","充值金额"],
  ["service_money","服务费用"],
  ["withdraw_money","提现金额"],
  ["withdraw_num","提现人数"],
])
